<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <form action="/">
      <van-search
        v-model="key_word"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onSearchCancel"
      />
    </form>

    <van-tabs v-model="tabActive" id="case-tab">
      <van-tab :title="'未结案件(' + caseNums + ')'">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in cases"
              :title="item.code"
              :label="item.lead_lawyer_name"
              :key="item.id"
            >
              <template #title>
                <div style="display: flex; justify-content: space-between">
                  <span>{{ item.party }}{{ item.reason }}</span>
                  <span
                    ><van-button
                      type="info"
                      size="mini"
                      @click="goCaseDetail(item.id)"
                    >
                      案件详情
                    </van-button></span
                  >
                </div>

                <!-- <van-tag round type="primary "> {{ item.case_type_name }}</van-tag> -->
              </template>
              <template #label>
                <van-row>
                  <van-col span="24">管辖法院：{{ item.court }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="24">开庭时间：{{ item.open_time }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="10"
                    >主办律师：{{ item.lead_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.lead_lawyer_tel }}</van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="10"
                    >出庭律师：{{ item.assist_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.assist_lawyer_tel }}
                  </van-col>
                </van-row>
                <van-row v-if="item.third_lawyer">
                  <van-col span="10"
                    >出庭律师：{{ item.third_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.third_lawyer_tel }}
                  </van-col>
                </van-row>
                <van-row style="padding-right: 0">
                  <van-col span="24">
                    <div style="display: flex; justify-content: space-between">
                      <span>最新进度：{{ item.current_phase }}</span>
                      <span
                        ><van-button
                          type="primary"
                          size="mini"
                          @click="caseProgress(item.progresses)"
                        >
                          案件进度
                        </van-button></span
                      >
                    </div>
                  </van-col>
                </van-row>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab :title="'归档案件(' + archiveNums + ')'">
        <van-list
          v-model="archiveLoading"
          :finished="archiveFinished"
          finished-text="没有更多了"
          @load="onArchiveLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in archives"
              :title="item.code"
              :label="item.lead_lawyer_name"
              :key="item.id"
            >
              <template #title>
                <div style="display: flex; justify-content: space-between">
                  <span>{{ item.reason }}</span>
                  <span
                    ><van-button
                      type="info"
                      size="mini"
                      @click="goCaseDetail(item.id)"
                    >
                      案件详情
                    </van-button></span
                  >
                </div>

                <!-- <van-tag round type="primary "> {{ item.case_type_name }}</van-tag> -->
              </template>
              <template #label>
                <van-row>
                  <van-col span="24">管辖法院：{{ item.court }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="24">开庭时间：{{ item.open_time }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="10"
                    >主办律师：{{ item.lead_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.lead_lawyer_tel }}</van-col
                  >
                </van-row>
                <van-row>
                  <van-col span="10"
                    >出庭律师：{{ item.assist_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.assist_lawyer_tel }}
                  </van-col>
                </van-row>
                <van-row v-if="item.third_lawyer">
                  <van-col span="10"
                    >出庭律师：{{ item.third_lawyer_name }}</van-col
                  >
                  <van-col span="14"
                    >联系电话：{{ item.third_lawyer_tel }}
                  </van-col>
                </van-row>
                <van-row style="padding-right: 0">
                  <van-col span="24">
                    <div style="display: flex; justify-content: space-between">
                      <span>最新进度：{{ item.current_phase }}</span>
                      <span
                        ><van-button
                          type="primary"
                          size="mini"
                          @click="caseProgress(item.progresses)"
                        >
                          案件进度
                        </van-button></span
                      >
                    </div>
                  </van-col>
                </van-row>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>

    <van-action-sheet
      title="案件办理进度"
      v-model="actionShow"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    >
      <div class="content">
        <van-steps direction="vertical" :active="0">
          <van-step v-for="item in progresses" :key="item.id">
            <div class="title">{{ item.progress_name }}</div>
            <div class="time">{{ item.add_time }}</div>
          </van-step>
        </van-steps>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";

import { isMemberRole } from "@/utils/session";
import { getCases, getClientCases } from "@/api/case";
export default {
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      cases: [],
      archives: [],
      caseNums: 0,
      archiveNums: 0,
      caseQuery: {
        page: 1,
        page_size: 5,
        archive_flag: 0,
        key_word: null,
      },
      archiveQuery: {
        page: 1,
        page_size: 5,
        archive_flag: 1,
        key_word: null,
      },
      actionShow: false,
      progresses: [],
      loading: false,
      finished: false,
      archiveLoading: false,
      archiveFinished: false,
      tabActive: 0,
      key_word: null,
    };
  },
  computed: {},
  methods: {
    onLoad() {
      this.getCaseList();
    },
    onArchiveLoad() {
      this.getArchiveCaseList();
    },
    onSearch(val) {
      if (val) {
        this.caseQuery.page = 1;
        this.caseQuery.key_word = val;

        this.archiveQuery.page = 1;
        this.archiveQuery.key_word = val;
        this.cases = [];
        this.archives = [];
        this.getCaseList();
        this.getArchiveCaseList();
      }
    },
    onSearchCancel() {
      this.caseQuery.key_word = null;
      this.archiveQuery.key_word = null;
      this.cases = [];
      this.archives = [];
      this.getCaseList();
      this.getArchiveCaseList();
    },

    getCaseList() {
      const member_role = isMemberRole();
      //律师或销售人员
      if (member_role) {
        this.loading = true;
        this.getCaseDatas(this.caseQuery);
      } else {
        //通过openid获取案件信息
        this.loading = true;
        getClientCases(this.caseQuery)
          .then((res) => {
            console.log("client:", res.data);
            this.caseResults(res);
          })
          .catch((error) => {
            this.loading = false;
            this.finished = true;
            if (error.response) {
              this.$notify({ type: "danger", message: "客户读取案件失败" });
            }
          });
      }
    },
    getArchiveCaseList() {
      const member_role = isMemberRole();
      //律师或销售人员
      if (member_role) {
        this.archiveLoading = true;
        //归档案件
        this.getArchiveCaseDatas(this.archiveQuery);
      } else {
        //通过openid获取案件信息
        this.archiveLoading = true;
        getClientCases(this.archiveQuery)
          .then((res) => {
            this.archiveResults(res);
          })
          .catch((error) => {
            this.archiveLoading = false;
            this.archiveFinished = true;
            if (error.response) {
              this.$notify({ type: "danger", message: "客户读取案件失败" });
            }
          });
      }
    },
    getCaseDatas(params) {
      getCases(params)
        .then((res) => {
          console.log(res);
          this.caseResults(res);
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.finished = true;
        });
    },
    caseResults(res) {
      if (res.data.results.length === 0) {
        this.cases = []; // 清空数组
        this.finished = true; // 停止加载
      }
      this.caseNums = res.data.count;
      this.caseQuery.page = res.data.page;
      this.cases.push(...res.data.results);
      this.loading = false;

      if (this.cases.length >= res.data.count) {
        this.finished = true; // 结束加载状态
      }
    },
    getArchiveCaseDatas(params) {
      getCases(params)
        .then((res) => {
          this.archiveResults(res);
        })
        .catch((error) => {
          console.log(error);
          this.archiveLoading = false;
          this.archiveFinished = true;
        });
    },
    archiveResults(res) {
      if (res.data.results.length === 0) {
        this.archives = []; // 清空数组
        this.archiveFinished = true; // 停止加载
      }
      this.archiveNums = res.data.count;
      this.archiveQuery.page = res.data.page;
      this.archives.push(...res.data.results);
      this.archiveLoading = false;

      if (this.archives.length >= res.data.count) {
        this.archiveFinished = true; // 结束加载状态
      }
    },
    goCaseDetail(case_id) {
      this.$router.push({
        name: "CaseDetail",
        params: { case_id: case_id + "" },
      });
      // },
    },
    caseProgress(data) {
      let progresses = data.slice();
      this.progresses = progresses.reverse();
      this.actionShow = true;
    },
    onCancel() {
      this.actionShow = false;
      this.progresses = [];
    },
  },
  created() {
    this.getArchiveCaseList();
  },
  mounted() {},
};
</script>

<style  scoped>
.van-cell__label {
  font-size: 14px;
}
.van-row {
  padding: 10px 5px;
}
.content {
  padding: 0px 16px;
}
.content .title {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
}
.content .time {
  font-size: 12px;
  padding-bottom: 10px;
}
</style>